<template>
  <v-container id="tableContainer" ref="tableContainer" fluid class="pa-0" style="height: 100%">
    <template
      v-if="$slots.header">
      <v-card width="100%" elevation="1" class="pa-3 mb-4">
        <slot name="header" />
      </v-card>
    </template>
    <v-card
      width="100%"
      class="mb-2"
    >
      <slot />
      <v-card-actions class="px-2" v-if="$slots.footer || footer">
        <slot name="footer">
          <div class="d-flex justify-space-between" style="width: 100%">
            <slot name="actions"><div></div></slot>
            <slot name="pagination">
              <div><pagination :total="total" :page.sync="currentPage" :limit.sync="limitnum" @pagination="$emit('on-page', currentPage)" /></div>
            </slot>
          </div>
        </slot>
      </v-card-actions>
    </v-card>
    <!-- temporary actions -->
    <MaterialDrawer v-bind="$attrs" v-on="$listeners" v-model="open">
      <slot name="drawer" />
    </MaterialDrawer>
  </v-container>
</template>

<script>
  export default {
    inheritAttrs: false,

    props: {
      footer: Boolean,
      total: {
        type: Number,
        default: 0
      },
      page: {
        type: Number,
        default: 0
      },
      limit: {
        type: Number,
        default: 10
      },
      showDrawer: Boolean,
      classname: String,
    },
    computed: {
      currentPage: {
        get() {
          return this.page
        },
        set(val) {
          this.$emit('update:page', val)
        }
      },
      limitnum: {
        get() {
          return this.limit
        },
        set(val) {
          this.$emit('update:limit', val)
        }
      },
      open: {
        get() {
          return this.showDrawer
        },
        set(bool) {
          this.$emit('update:showDrawer', bool)
        }
      }
    }
  }
</script>